<template xmlns="http://www.w3.org/1999/html">
      <!-- 右侧主体内容 -->
      <el-main class="main-content">
        <!--评价卡片-->
        <div class="container">
          <h2>我的评价</h2>
          <el-empty description="暂无评价" v-if="reviews.length === 0"></el-empty>

          <el-row :gutter="20" v-else>
            <el-col :span="12" v-for="review in reviews" :key="review.id">
              <el-card shadow="hover" class="review-card">
                <div class="review-content">
                  <p><strong>用户：</strong>{{ review.userName }}</p>
                  <p><strong>评分：</strong>
                    <el-rate v-model="review.rating" disabled show-score text-color="#ff9900" score-template=""></el-rate>
                  </p>
                  <p><strong>评价内容：</strong>{{ review.content }}</p>
                  <p><strong>评价时间：</strong>{{ formatDate(review.createTime) }}</p>
                  <p><strong>回复状态：</strong>{{ review.replyStatus ? '已回复' : '未回复' }}</p>
                  <!-- 回复按钮 -->
                  <div class="review-actions">
                    <el-button
                        @click="replyReview(review)"
                        v-if="!review.replyStatus"
                        type="primary" size="small"
                    >回复</el-button>

                    <!-- 已回复内容 -->
<!--                    <p><strong>回复状态：</strong>{{ review.replyStatus ? '已回复' : '未回复' }}</p>-->
                    <div v-if="review.replyStatus" class="reply-section">
                      <p><strong>我的回复：</strong>{{ review.replyContent }}</p>
                      <p><strong>回复时间：</strong>{{ formatDate(review.replyTime) }}</p>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    <!--  回复弹窗  -->
    <el-dialog title="回复评价" v-model="replyDialogVisible" width="40%">
      <el-input type="textarea" v-model="replyContent" :rows="4" placeholder="请输入您的回复..."></el-input>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="replyDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitReply">提交</el-button>
    </span>
      </template>
    </el-dialog>
</template>

<script>
import EditProfileDialog from '@/components/EditProfileDialog.vue'
import axios from "@/request/request.js"
export default {
  name: 'EscortHomeView',
  components: { EditProfileDialog },
  data() {
    return {
      activeIndex: '3', // 当前菜单选中项
      currentPageTitle: '用户评价',
      editDialogVisible: false,

      replyDialogVisible: false, // 控制回复弹窗显示
      currentReplyReview: null,   // 当前选中的评价对象
      replyContent:'',         // 用户输入的回复内容
      reviews: [], // 存储评价列表
      loading: true
    }
  },
  created() {
    this.fetchReviews();
  },
  methods: {
    /*格式化时间*/
    formatDate(time) {
      if (!time) return '';
      const date = new Date(time);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    replyReview(review) {
      this.currentReplyReview = review;
      this.replyContent = ''; // 清空上次内容
      this.replyDialogVisible = true;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    /*回复评价*/
    async submitReply() {
      if (!this.replyContent.trim()) {
        this.$message.warning('请输入回复内容');
        return;
      }

      try {
        const res = await axios.put('/v1/escort/reply', {
          reviewId: this.currentReplyReview.id,
          replyContent: this.replyContent
        }, {withCredentials: true});

        if (res.data.state === 2000) {
          this.$message.success('回复成功');
          this.replyDialogVisible = false;
          this.fetchReviews(); // 刷新评价列表
        } else {
          this.$message.error('回复失败');
        }
      } catch (error) {
        console.error(error);
        this.$message.error('网络异常，回复失败');
      }
    },
    /*查看评价*/
    async fetchReviews() {
      try {
        const res = await axios.get('/v1/escort/escort-reviews', {withCredentials: true});
        if (res.data.state === 2000) {
          this.reviews = res.data.data || [];
        } else {
          this.$message.error('获取评价失败');
        }
      } catch (error) {
        console.error(error);
        this.$message.error('网络异常，无法获取评价');
      }
    },
  }
}
</script>

<style scoped>

/* 新增/修改样式部分 */
.main-content {
  padding: 20px;
  background-color: #f0f9ff; /* 浅蓝背景，与主色系呼应 */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  color: #333;
  font-size: 24px;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #c4e2fb; /* 主色系分割线 */
}

.el-empty {
  margin: 50px 0;
  color: #999;
}

.el-row {
  gap: 25px; /* 增加卡片间距 */
}

/* 评价卡片*/
.review-card {
  margin-bottom: 25px;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(196, 226, 251, 0.3); /* 主色系阴影 */
  padding: 25px;
  background-color: #fff; /* 白色卡片 */
}

.review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 16px rgba(196, 226, 251, 0.4);
}

.review-content p {
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}

.review-content strong {
  color: #333;
  font-weight: 500;
  min-width: 100px; /* 统一标签宽度 */
  display: inline-block;
}

.el-rate {
  color: #ff9900; /* 评分星星颜色 */
}

.reply-section {
  background-color: #f8fbff; /* 浅蓝背景块 */
  padding: 15px;
  border-radius: 8px;
  margin-top: 18px;
}
.review-actions {
  margin-top: 20px;
  border-top: 1px solid #e6f2ff; /* 主色系分割线 */
  padding-top: 18px;
  display: flex;
  justify-content: flex-end; /* 按钮靠右 */
  gap: 10px;
}

.el-button--primary {
  background-color: #409eff; /* 主色系按钮 */
  border-color: #409eff;
  border-radius: 20px; /* 胶囊按钮 */
  padding: 8px 24px;
  font-size: 14px;
}

.el-button--primary:hover {
  background-color: #3584e4; /* 深色hover效果 */
}

/* 弹窗样式优化 */
.el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(196, 226, 251, 0.5);
}

.el-dialog__header {
  background-color: #f0f9ff; /* 弹窗头部背景 */
  border-bottom: 1px solid #e6f2ff;
  padding: 20px;
}

.el-dialog__title {
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.el-input__textarea {
  border-radius: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 20px;
}

</style>
